<template>
    <div class="demo-card-wide mdl-card mdl-shadow--2dp animate__animated animate__fadeIn">
        <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">添加商品</h2>
        </div>
        <div class="mdl-card__supporting-text commodity">
            填写您要添加的商品信息<br>
            <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
                <tbody>
                    <tr class="tr">
                        <td class="mdl-data-table__cell--non-numeric">商品名称</td>
                        <td>
                            <div class="mdl-textfield mdl-js-textfield">
                                <input class="mdl-textfield__input" type="text" id="input_name">
                                <label class="mdl-textfield__label" for="input_name"></label>
                            </div>
                        </td>
                    </tr>
                    <tr class="tr">
                        <td class="mdl-data-table__cell--non-numeric">定价</td>
                        <td>
                            <!-- Numeric Textfield -->
                            <form action="#">
                                <div class="mdl-textfield mdl-js-textfield">
                                    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?"
                                        id="input_price" value="1.00">
                                    <label class="mdl-textfield__label" for="input_price"></label>
                                    <span class="mdl-textfield__error">Input is not a number!</span>
                                </div>
                            </form>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="mdl-card__actions mdl-card--border">
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" @click="backToMainMenu">
                取消
            </a>
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" @click="addButtonOnclick">
                添加
            </a>
        </div>
        <div class="mdl-card__menu">
            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                <i class="material-icons">share</i>
            </button>
        </div>
    </div>
</template>

<script>
export default {
    setup() {
        return {}
    },
    props: [
        "backToMainMenu"
    ],
    data() {
        return {
        }
    },
    methods: {
        onlyNum(str) {
            var regs = /^(\d+)(\.\d+)?$/;
            return regs.test(str)
        },
        addButtonOnclick() {
            var name = document.querySelector("#input_name").value
            var price = parseFloat(document.querySelector("#input_price").value)

            if (name == "" || price == "") {
                this.$parent.msg("缺少商品信息")
            }
            else if (!this.onlyNum(price)) {
                this.$parent.msg("定价不是合法的数字")
            }
            else {
                this.$axios({
                    method: "post",
                    url: "/merchant/addComm",
                    dataType: "json",
                    data: {
                        "name": name,
                        "price": price,
                        "merchant": this.$parent.user.name
                    }
                }).then((res) => {
                    if (res.data.code == "0") {
                        this.$parent.msg("成功添加")
                        this.$parent.getMyComm()
                        this.backToMainMenu()
                    } else {
                        this.$parent.msg(res.data.msg)
                        if (res.data.code == "005") {
                            window.location.href = "/#/login"
                            window.location.reload()
                        }
                    }
                })
            }
        }
    },

}
</script>

<style lang="scss" scoped>
.demo-card-wide.mdl-card {
    width: 512px;
}

.demo-card-wide>.mdl-card__title {
    color: #fff;
    height: 176px;
    background: url('../assets/img/shop.jpg') center / cover;
}

.demo-card-wide>.mdl-card__menu {
    color: #fff;
}

.commodity {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 20px;
    margin: 20px;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.tr {
    line-height: 60px;
}
</style>